<template>
    <view>
        <!-- <view @click="$func.jump('/yCreate/pages/shoppingCart')" class="cart u-flex-col u-flex-center">
			<image src="@/static/wImg/cart1.png"></image>
			购物车
		</view> -->
        <image
            src="../../static/index/cart.png"
            mode=""
            class="cart u-flex-col u-flex-center"
            @click="$func.jump('/yCreate/pages/shoppingCart')"
        ></image>
        <!-- <uni-nav-bar :fixed="true" :shadow="false" :statusBar="true" title="千创商城" color="#ffffff">
			</uni-nav-bar> -->
        <!-- #ifndef H5 -->
        <uni-nav-bar
            :fixed="true"
            :shadow="false"
            :statusBar="true"
            title="千创商城"
            color="#ffffff"
        >
        </uni-nav-bar>
        <view :style="{ height: `${configInfo.navBarHeight}px` }"></view>
        <!-- #endif -->
        <image
            :src="configInfo.shop_img_url"
            mode=""
            class="barimg"
            @tap.stop="goRich(2)"
        ></image>
        <view style="padding: 0 30rpx">
            <!-- <u-swiper :list="list" height="272" style="margin-top: 20rpx;"></u-swiper> -->
            <swiper
                class="swiper"
                indicator-color="#fff"
                indicator-active-color="#606DCE"
                :indicator-dots="true"
                :autoplay="true"
                :interval="3000"
                :duration="2000"
            >
                <swiper-item v-for="item in list">
                    <view class="swiper-item">
                        <image
                            :src="item.image"
                            mode=""
                            @click="
                                $func.jump(
                                    '/wNew/pages/detail?id=' + item.goods_id
                                )
                            "
                        >
                        </image>
                    </view>
                </swiper-item>
            </swiper>
            <view
                class="padding-lr-20 padding-tb-15 bg-ff radius-10 margin-top-20"
                @click="$func.jump('/wNew/pages/sieveStore')"
            >
                <view class="border-ed padding-20 flex align-center radius-10">
                    <image
                        src="../../static/wImg/greySea.png"
                        mode=""
                        class="searchimg"
                    ></image>
                    <view class="searchline"></view>
                    <view class="text-24 flex-one text-98"
                        >输入您想要的内容</view
                    >
                </view>
            </view>

            <view class="classify u-flex u-flex-wrap u-row-between">
                <block
                    v-for="(item, index) in isShowAllCategory
                        ? classifyList
                        : classifyList.slice(0, 3)"
                    :key="index"
                >
                    <view
                        class="u-flex-col u-col-center cla_item"
                        @click="goClass(item.id)"
                    >
                        <image :src="item.image"></image>
                        {{ item.name }}
                    </view>
                </block>

                <view
                    class="u-flex-col u-col-center cla_item"
                    @click.stop="isShowAllCategory = !isShowAllCategory"
                >
                    <!-- <view class="u-flex-col u-col-center cla_item" @click.stop="$func.jump('/wNew/pages/classification?type=1')"> -->
                    <image
                        src="../../static/wImg/classify8.png"
                        mode=""
                    ></image>
                    {{ isShowAllCategory ? "收起" : "开启" }}
                </view>
            </view>

            <!-- 我的足迹 -->
            <view
                class="fill-base pl-lg pr-lg pb-lg margin-top-20 padding-tb-30 radius-10"
                v-if="fplist && fplist.length > 0"
            >
                <view class="flex-between pb-lg">
                    <view class="f-st-title text-bold flex-between">
                        <view class="mr-md" style="width: 15px; height: 17px">
                            <image
                                src="../../static/index/zj.png"
                                class="van-img"
                                style="object-fit: cover"
                            ></image>
                        </view>
                        我的足迹
                    </view>
                </view>
                <scroll-view scroll-x class="recommend-technician">
                    <block
                        v-for="(item, index) in fplist"
                        :key="index"
                        @tap.stop="godetail(item.id)"
                    >
                        <view
                            class="recommend-item type-1"
                            @tap.stop="godetail(item.id)"
                        >
                            <!-- #ifdef H5 -->
                            <view class="cover radius-16">
                                <view
                                    class="h5-image cover radius-16"
                                    :style="{
                                        backgroundImage: `url('${item.image}')`,
                                    }"
                                >
                                </view>
                            </view>
                            <!-- #endif -->
                            <!-- #ifndef H5 -->
                            <image
                                mode="aspectFill"
                                lazy-load
                                class="cover radius-16"
                                :src="item.image"
                            ></image>
                            <!-- #endif -->
                            <view
                                class="flex-center f-desc c-title text-bold mt-md"
                            >
                                <view class="ellipsis">{{ item.title }}</view>
                            </view>
                        </view>
                    </block>
                </scroll-view>
            </view>

            <view class="burst u-flex u-col-top u-row-between">
                <view class="burst_left">
                    <view class="bur_top">
                        <image src="../../static/wImg/greenBg.png"></image>
                        <text
                            class="bur_more"
                            @click="
                                $func.jump(
                                    '/wNew/pages/sieveStore?goods_type=1'
                                )
                            "
                            >更多<u-icon
                                style="margin-left: 5rpx"
                                size="20"
                                name="arrow-right"
                                color="#999"
                            ></u-icon
                        ></text>
                    </view>
                    <view
                        class="u-flex u-flex-wrap u-row-between"
                        style="padding: 10rpx"
                    >
                        <view
                            class="bur_item u-flex-col u-flex-center"
                            v-for="(item, index) in platform_hot"
                            :key="index"
                            @click="
                                $func.jump('/wNew/pages/detail?id=' + item.id)
                            "
                        >
                            <image :src="item.image" mode="aspectFill"></image>
                            <view class="bur_price">￥{{ item.price }}</view>
                        </view>
                    </view>
                </view>
                <view style="width: 48%">
                    <view class="burst_left" style="width: 100%">
                        <view class="bur_top">
                            <image src="../../static/wImg/pinkBg.png"></image>
                            <text
                                class="bur_more"
                                @click="
                                    $func.jump(
                                        '/wNew/pages/sieveStore?goods_type=2'
                                    )
                                "
                                >更多<u-icon
                                    style="margin-left: 5rpx"
                                    size="20"
                                    name="arrow-right"
                                    color="#999"
                                ></u-icon
                            ></text>
                        </view>
                        <view
                            class="u-flex u-flex-wrap u-row-between"
                            style="padding: 10rpx"
                        >
                            <view
                                class="bur_item"
                                v-for="(item, index) in platform_bk"
                                :key="index"
                                @click="
                                    $func.jump(
                                        '/wNew/pages/detail?id=' + item.id
                                    )
                                "
                            >
                                <image
                                    :src="item.image"
                                    mode="aspectFill"
                                ></image>
                            </view>
                            <!-- <view class="bur_item " >
								<image src="../../static/wImg/tc_6.png" mode="aspectFill"></image>
							</view> -->
                        </view>
                    </view>
                    <view
                        class="burst_left"
                        style="width: 100%; margin-top: 20rpx"
                    >
                        <view class="bur_top">
                            <image src="../../static/wImg/orangeBg.png"></image>
                            <text
                                class="bur_more"
                                @click="
                                    $func.jump(
                                        '/wNew/pages/sieveStore?goods_type=3'
                                    )
                                "
                                >更多<u-icon
                                    style="margin-left: 5rpx"
                                    size="20"
                                    name="arrow-right"
                                    color="#999"
                                ></u-icon
                            ></text>
                        </view>
                        <view
                            class="u-flex u-flex-wrap u-row-between"
                            style="padding: 10rpx"
                        >
                            <view
                                class="bur_item"
                                v-for="(item, index) in platform_ms"
                                :key="index"
                                @click="
                                    $func.jump(
                                        '/wNew/pages/detail?id=' + item.id
                                    )
                                "
                            >
                                <image
                                    :src="item.image"
                                    mode="aspectFill"
                                ></image>
                            </view>
                            <!-- <view class="bur_item ">
								<image src="../../static/wImg/tc_8.png" mode="aspectFill"></image>
							</view> -->
                        </view>
                    </view>
                </view>
            </view>
            <!-- <view class="tit u-flex u-row-between">
				<view class="tit_item" @click="titFn(index)" :class="index == titIndex ?'tit_css' :''"
					v-for="item,index in titList">
					<image src="../../static/wImg/greRight.png" v-if="index == titIndex"></image>
					<image src="../../static/wImg/blaRight.png" v-else></image>
					<text>{{item}}</text>
					<image src="../../static/wImg/greLft.png" v-if="index == titIndex"></image>
					<image src="../../static/wImg/blaLeft.png" v-else></image>
				</view>
			</view> -->
            <view class="flex align-center justify-center margin-top-20">
                <image
                    src="../../static/index/newleft.png"
                    class="btimg"
                ></image>
                <view
                    class="text-28 text-bold margin-lr-10"
                    style="color: #ff7a10"
                    >商品列表</view
                >
                <image
                    src="../../static/index/newright.png"
                    class="btimg"
                ></image>
            </view>

            <mescroll-body
                :sticky="true"
                ref="mescrollRef"
                @init="mescrollInit"
                @down="downCallback"
                @up="upCallback"
            >
                <!-- <view class="">
					<u-waterfall v-if="sshow" v-model="leftList" ref="uWaterfall">
						<template v-slot:left="{leftList}">
						</template>
						<template v-slot:right="{rightList}">
						</template>
					</u-waterfall>
				</view> -->
                <view class="listbox">
                    <view
                        class="demo-warter"
                        @click="$func.jump('/wNew/pages/detail?id=' + item.id)"
                        v-for="(item, index) in flowList"
                        :key="index"
                    >
                        <!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
                        <u-lazy-load
                            threshold="-450"
                            border-radius="10"
                            :image="item.image"
                            :index="index"
                        ></u-lazy-load>
                        <view
                            style="
                                margin-top: 20rpx;
                                display: flex;
                                display: -webkit-box;
                                -webkit-box-orient: vertical;
                                -webkit-line-clamp: 2;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                flex: 1;
                                line-height: 40rpx;
                            "
                        >
                            <text
                                class="mark"
                                style="background-color: #5d64ca"
                                v-if="item.shop.isself == 1"
                                >平台</text
                            >
                            <text class="mark markOra" v-else>商家</text>
                            <text
                                class="mark markOra"
                                v-if="item.platform_ms == 1"
                                >秒杀</text
                            >
                            <text
                                class="mark markOra"
                                v-if="item.platform_bk == 1"
                                >折扣</text
                            >
                            {{ item.title }}
                        </view>
                        <view class="demo-tag">
                            <view
                                class="demo-tag-text"
                                v-for="(items, indexs) in item.json"
                                :key="indexs"
                            >
                                {{ items }}
                            </view>
                            <!-- <view class="demo-tag-text demo-tag-text-grey">
								特产标签
							</view> -->
                        </view>
                        <view class="demo-price">
                            <text>￥</text>{{ item.price }}
                            <text class="demo-price-grey"
                                >￥{{ item.hx_price }}</text
                            >
                        </view>
                        <!-- <view class="demo-shop" @click.stop="$func.jump('/wNew/pages/store?id=' + item.shop_id)">
							<image src="../../static/wImg/home.png"></image>
							{{item.shop.shopname}}
							<u-icon name="arrow-right" color="#999"></u-icon>
						</view> -->
                        <view class="flex align-center">
                            <view
                                class="demo-shop"
                                @click.stop="
                                    $func.jump(
                                        '/wNew/pages/store?id=' + item.shop_id
                                    )
                                "
                            >
                                <image src="../../static/wImg/home.png"></image>
                                {{ item.shop.shopname }}
                                <u-icon
                                    name="arrow-right"
                                    color="#999"
                                ></u-icon>
                            </view>
                            <view
                                class="flex align-center flex-one justify-end"
                                v-if="item.shop.is_zb == 1"
                            >
                                <image
                                    src="../../static/index/zb.png"
                                    mode=""
                                    class="zbimg"
                                ></image>
                                <view
                                    class="text-20 margin-left-10"
                                    style="color: #f76b1c"
                                    >直播中</view
                                >
                            </view>
                        </view>
                    </view>
                </view>
            </mescroll-body>
        </view>
        <u-tabbar
            v-model="current"
            @change="changeTab"
            height="55px"
            active-color="#606DCE"
            inactive-color="#989898"
            :list="tabList"
        ></u-tabbar>
        <view class="layer" v-if="addShow">
            <view class="layer-content">
                <view
                    class="confirm-bar line-height-80 padding-lr-30 bg-ff border-bottom-ed flex align-center justify-between"
                >
                    <view class="text-cc" @click="addShow = false">取消</view>
                    <view class="" style="color: #007aff" @click="adresSubmit()"
                        >确定</view
                    >
                </view>
                <picker-view
                    :value="multiIndex"
                    :indicator-style="indicatorStyle"
                    class="picker-view"
                    @change="changeAdres"
                >
                    <picker-view-column>
                        <view
                            class="item-pircker"
                            v-for="(item, index) in arealist1"
                            :key="index"
                            >{{ item.name }}</view
                        >
                    </picker-view-column>
                    <picker-view-column v-if="arealist2">
                        <view
                            class="item-pircker"
                            v-for="(item, index) in arealist2"
                            :key="index"
                            >{{ item.name }}</view
                        >
                    </picker-view-column>
                    <!-- <picker-view-column v-if="arealist3">
							<view class="item-pircker" v-for="(item,index) in arealist3" :key="index">{{item.name}}</view>
						</picker-view-column> -->
                </picker-view>
            </view>
        </view>
        <!-- <u-picker v-model="addShow" @confirm="addConfirm" mode="region"></u-picker> -->
    </view>
</template>

<script>
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
import { mapState, mapActions, mapMutations } from "vuex";
export default {
    mixins: [MescrollMixin], // 使用mixin
    data() {
        return {
            top: 0,
            city: "北京市",
            addShow: false,
            sshow: true,
            list: [],
            classifyList: [],
            titList: ["平台优选", "地方商家"],
            titIndex: 1,
            flowList: [],
            tabList: [
                {
                    iconPath: "/static/tab/shouye_nor.png",
                    selectedIconPath: "/static/tab/shouye_sel.png",
                    text: "首页",
                },
                {
                    iconPath: "/static/tab/cate_nor.png",
                    selectedIconPath: "/static/tab/cate_sel.png",
                    text: "分类",
                },
                {
                    iconPath: "/static/tab/live_nor.png",
                    selectedIconPath: "/static/tab/live_sel.png",
                    text: "直播",
                },
                {
                    iconPath: "/static/tab/dynamic_nor.png",
                    selectedIconPath: "/static/tab/dynamic_sel.png",
                    text: "动态",
                },

                {
                    iconPath: "/static/tab/wode_nor.png",
                    selectedIconPath: "/static/tab/wode_sel.png",
                    text: "我的",
                },
            ],
            current: 0,
            platform_bk: "",
            platform_bk: "",
            platform_ms: "",
            arealist1: [],
            arealist2: [],
            arealist3: [],
            areaname: "",
            multiIndex: [0, 0, 0],
            indicatorStyle: "height: 80rpx;",
            fplist: [],

            isShowAllCategory: false,
        };
    },
    watch: {
        tabList: {
            handler(newVal, oldVal) {
                newVal.forEach((item, index) => {
                    if (
                        (item.text == "直播" || item.text == "动态") &&
                        uni.getStorageSync("configInfo").live_switch == 0
                    ) {
                        newVal.splice(index, 1);
                    }
                });
            },
            deep: true,
            immediate: true,
        },
    },
    computed: mapState({
        configInfo: (state) => state.config.configInfo,
    }),
    onLoad() {
        let res = uni.getSystemInfoSync();
        if (res.safeAreaInsets.top == 0) {
            this.top = 20;
        } else {
            this.top = res.safeAreaInsets.top;
        }
        var city_name = uni.getStorageSync("city_name");
        if (city_name) {
            this.city = city_name;
        }

        this.indexFn();
        this.$u
            .post("/api/index/get_hot", {
                // location_city: uni.getStorageSync('city')
                location_city: "",
            })
            .then((res) => {
                if (res.code == 1) {
                    this.platform_bk = res.data.platform_bk;
                    this.platform_hot = res.data.platform_hot;
                    this.platform_ms = res.data.platform_ms;
                }
            });
        this.$u.post("/api/index/area_list", {}).then((res) => {
            if (res.code == 1) {
                var address = res.data;
                this.arealist1 = address;
                this.arealist2 = address[0].children;
                this.arealist3 = address[0].children[0].children;
            }
        });
        this.$u
            .post("/api/index/get_index_category", {
                location_city: "",
            })
            .then((res) => {
                if (res.code == 1) {
                    this.classifyList = res.data;
                }
            });
        if (uni.getStorageSync("city")) {
            uni.setStorageSync("city", "北京/北京市");
        }
    },
    onShow() {
        this.getfootprints();
        this.current = 0;
    },
    methods: {
        godetail(id) {
            uni.navigateTo({
                url: "/wNew/pages/detail?id=" + id,
            });
        },
        //足迹
        async getfootprints() {
            let res = await this.$api.service.footPrint({
                shopFootprints: 1,
                serviceFootprints: 0,
            });
            console.log(res, "足迹");
            this.fplist = res;
        },
        indexFn() {
            this.$u.post("/api/index/get_banner").then((res) => {
                if (res.code == 1) {
                    this.list = res.data;
                }
            });
        },
        titFn(index) {
            this.titIndex = index;
            this.sshow = false;
            this.mescroll.resetUpScroll();
        },
        upCallback(page) {
            this.mescroll.optDown.use = false;
            this.mescroll.optUp.textNoMore = "- 已经到底啦 -";
            this.$u
                .post("/api/index/likes", {
                    page: page.num,
                    limit: page.size,
                    type: this.titIndex + 1,
                    location_city: "",
                })
                .then((res) => {
                    this.mescroll.endBySize(
                        res.data.data.length,
                        res.data.total
                    );
                    if (page.num == 1) this.flowList = []; //如果是第一页需手动制空列表
                    this.flowList = this.flowList.concat(res.data.data); //追加新数据
                    this.sshow = true;
                })
                .catch(() => {
                    //联网失败, 结束加载
                    this.mescroll.endErr();
                });
        },
        changeTab(e) {
            if (uni.getStorageSync("configInfo").live_switch !== 0) {
                if (e == 0) {
                    this.$func.jump("/pages/service");
                } else if (e == 1) {
                    this.$func.jump(
                        `/wNew/pages/classification?type=1&showBack=none`
                    );
                } else if (e == 2) {
                    this.$func.jump(
                        "/pages/dyamicshop?children=2&area_id=" +
                            uni.getStorageSync("city")
                    );
                } else if (e == 3) {
                    this.$func.jump(
                        "/pages/dyamicshop?children=2&area_id=" +
                            uni.getStorageSync("city")
                    );
                } else if (e == 4) {
                    this.$func.jump("/pages/mine");
                }
            } else {
                if (e == 0) {
                    this.$func.jump("/pages/service");
                } else if (e == 1) {
                    this.$func.jump(
                        `/wNew/pages/classification?type=1&showBack=none`
                    );
                } else if (e == 2) {
                    this.$func.jump("/pages/mine");
                }
            }
            return;
            if (e == 0) {
                this.$func.jump("/pages/service");
            } else if (e == 1) {
                this.$func.jump(
                    `/wNew/pages/classification?type=1&showBack=none`
                );
            } else if (e == 3) {
                this.$func.jump(
                    "/pages/dyamicshop?children=2&area_id=" +
                        uni.getStorageSync("city")
                );
            } else if (e == 2) {
                if (uni.getStorageSync("configInfo").live_switch == 0) {
                    this.$func.jump(
                        "/pages/dyamicshop?children=2&area_id=" +
                            uni.getStorageSync("city")
                    );
                } else {
                    this.$func.jump("/live/pages/live/liveList?type=1");
                }
            } else if (e == 4) {
                if (uni.getStorageSync("configInfo").live_switch == 0) {
                } else {
                    this.$func.jump("/pages/mine");
                }
            }
        },
        addConfirm(e) {
            this.city = e.city.label;
            console.log(e);
            var dz = e.province.label + "/" + e.city.label;
            uni.setStorageSync("city", dz);
            this.$u
                .post("/api/index/get_hot", {
                    location_city: "",
                })
                .then((res) => {
                    if (res.code == 1) {
                        this.platform_bk = res.data.platform_bk;
                        this.platform_bk = res.data.platform_bk;
                        this.platform_ms = res.data.platform_ms;
                    }
                });
            this.$u
                .post("/api/index/likes", {
                    page: 1,
                    location_city: "",
                })
                .then((res) => {
                    this.flowList = res.data.data; //追加新数据
                });
        },
        changeAdres(e) {
            let curMultiIndex = e.detail.value;
            if (curMultiIndex[0] != this.multiIndex[0]) {
                this.multiIndex = [curMultiIndex[0], 0, 0];
            } else if (curMultiIndex[1] != this.multiIndex[1]) {
                this.multiIndex = [this.multiIndex[0], curMultiIndex[1], 0];
            } else if (curMultiIndex[2] != this.multiIndex[2]) {
                this.multiIndex = [
                    this.multiIndex[0],
                    this.multiIndex[1],
                    curMultiIndex[2],
                ];
            }
            console.log(this.multiIndex);
            var i = this.multiIndex[0];
            var j = this.multiIndex[1];
            var k = this.multiIndex[2];
            this.arealist2 = this.arealist1[i].children;
            this.arealist3 = this.arealist1[i].children[j].children;
            console.log(this.cateid);
        },
        adresSubmit() {
            var i = this.multiIndex[0];
            var j = this.multiIndex[1];
            var k = this.multiIndex[2];
            var dz =
                this.arealist1[i].name +
                "/" +
                this.arealist1[i].children[j].name;
            this.city = this.arealist1[i].children[j].children[k].name;
            uni.setStorageSync("city", dz);
            uni.setStorageSync("city_name", this.arealist1[i].children[j].name);
            this.$u
                .post("/api/index/get_hot", {
                    location_city: "",
                })
                .then((res) => {
                    if (res.code == 1) {
                        this.platform_bk = res.data.platform_bk;
                        this.platform_bk = res.data.platform_bk;
                        this.platform_ms = res.data.platform_ms;
                    }
                });
            this.$u
                .post("/api/index/likes", {
                    page: 1,
                    location_city: "",
                    type: this.titIndex + 1,
                })
                .then((res) => {
                    this.flowList = res.data.data; //追加新数据
                    this.mescroll.endBySize(
                        res.data.data.length,
                        res.data.total
                    );
                });
            this.addShow = false;
        },
        goClass(id) {
            if (id) {
                uni.navigateTo({
                    url: "/wNew/pages/classify?id=" + id,
                });
            } else {
                uni.navigateTo({
                    url: "/wNew/pages/classify",
                });
            }
        },
        goRich(type) {
            uni.navigateTo({
                url: "/pages/rich?type=" + type,
            });
        },
    },
};
</script>

<style lang="scss" scoped>
@import url(../../components/common.css);

.cart {
    width: 140rpx;
    height: 140rpx;
    position: fixed;
    bottom: 200rpx;
    border-radius: 50%;
    background: #fff;
    right: 20rpx;
    z-index: 9999;
    font-size: 28rpx;

    image {
        width: 40rpx;
        height: 40rpx;
        margin-bottom: 7rpx;
    }
}

.top {
    padding: 0 30rpx 200rpx;
    background-color: #1db481;

    .top_add {
        .top_add_text {
            width: 120rpx;
            font-size: 28rpx;
            color: #fff;
            overflow: hidden; // 文字超长隐藏
            text-overflow: ellipsis; // 显示...
            white-space: nowrap; // 单行显示
        }

        .top_san {
            width: 22rpx;
            height: 10rpx;
            margin-left: 10rpx;
        }
    }

    .top_sea {
        flex: 1;
        z-index: 999;
        margin-left: 40rpx;
        height: 60rpx;
        padding: 0 18rpx;
        border-radius: 20rpx;
        background: rgba(255, 255, 255, 0.7);
        border-radius: 10rpx 10rpx 10rpx 10rpx;

        .top_sea_img {
            width: 25.15rpx;
            height: 23.6rpx;
        }

        input {
            color: #fff;
            height: 20rpx;
            font-size: 24rpx;
            padding: 0 18rpx;
            margin-left: 18rpx;
            border-left: 1rpx solid #fff;
        }
    }
}

.classify {
    background: #fff;
    margin-top: 20rpx;
    padding: 30rpx 58rpx 6rpx;
    border-radius: 20rpx;

    .cla_item {
        font-size: 24rpx;
        color: #333;
        z-index: 999;
        margin-right: 60rpx;
        margin-bottom: 24rpx;

        &:nth-child(4n) {
            margin-right: 0;
        }

        image {
            width: 80rpx;
            height: 80rpx;
            margin-bottom: 12rpx;
        }
    }
}

.burst {
    margin-top: 20rpx;

    .burst_left {
        width: 48%;
        background: #fff;
        border-radius: 20rpx;

        .bur_top {
            width: 100%;
            height: 48rpx;
            text-align: right;
            position: relative;

            image {
                width: 100%;
                height: 48rpx;
                position: absolute;
            }

            .bur_more {
                font-size: 20rpx;
                color: #999;
                padding-right: 10rpx;
            }
        }

        .bur_item {
            width: 148rpx;
            margin-bottom: 10rpx;

            image {
                width: 148rpx;
                height: 148rpx;
                border-radius: 8rpx 8rpx 8rpx 8rpx;
            }

            .bur_price {
                font-size: 24rpx;
                color: #ff5125;
                margin-top: 10rpx;
            }
        }
    }
}

.tit {
    background: #fff;
    height: 76rpx;
    border-radius: 20rpx;
    margin-top: 20rpx;
    margin-bottom: 10rpx;

    .tit_item {
        width: 50%;
        z-index: 999;
        display: flex;
        color: #666666;
        align-items: center;
        justify-content: center;

        &:first-child {
            border-right: 1rpx solid #dbdbdb;
        }

        text {
            font-size: 28rpx;
            font-weight: bold;
            letter-spacing: 8rpx;
            margin: 0 3rpx 0 7rpx;
        }

        image {
            width: 23rpx;
            height: 19rpx;
            margin-bottom: -6rpx;
        }
    }

    .tit_css {
        color: #1db481;
    }
}

.demo-warter {
    border-radius: 8px;
    margin-bottom: 15rpx;
    background-color: #ffffff;
    padding: 8px;
    position: relative;
    width: 340rpx;
    display: inline-block;
}

.demo-image {
    width: 100%;
    border-radius: 4px;
}

.demo-title {
    // font-size: 30rpx;
    // margin-top: 5px;
    // color: $u-main-color;
}

.demo-tag {
    display: flex;
    flex-wrap: wrap;
    margin-top: 5px;
    margin-left: -8rpx;
}

.demo-tag-owner {
    background-color: $u-type-error;
    color: #ffffff;
    display: flex;
    align-items: center;
    padding: 4rpx 14rpx;
    border-radius: 50rpx;
    font-size: 20rpx;
    line-height: 1;
}

.demo-tag-text {
    margin-bottom: 10rpx;
    border: 1px solid #f43000;
    color: #f43000;
    margin-left: 8px;
    line-height: 1;
    padding: 8rpx 24rpx 8rpx 24rpx;
    display: flex;
    align-items: center;
    border-radius: 4rpx;
    font-size: 20rpx;
}

.demo-tag-text-grey {
    border: 1px solid #999;
    color: #999;
}

.mark {
    font-size: 20rpx;
    color: #fff;
    padding: 6rpx 10rpx;
    background: #1db481;
    border-radius: 4rpx;
    margin-right: 20rpx;
}

.markOra {
    background: #ef5205;
}

.demo-price {
    font-size: 30rpx;
    color: $u-type-error;
    margin-top: 5px;
    font-weight: bold;
    font-size: 32rpx;

    text {
        font-size: 20rpx;
    }

    .demo-price-grey {
        color: #d3d3d3;
        font-size: 20rpx;
        font-weight: 400;
        margin-left: 18rpx;
        text-decoration: line-through;
    }
}

.demo-shop {
    font-size: 22rpx;
    color: $u-tips-color;
    margin-top: 5px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    image {
        width: 20rpx;
        height: 20rpx;
        margin-right: 8rpx;
    }
}

.layer {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
}

.layer-content {
}

/* 浮层内容 */
.confirm-bar {
    position: fixed;
    bottom: 600rpx;
    left: 0;
    width: 750rpx;
}

.line-height-80 {
    height: 80rpx;
    line-height: 80rpx;
}

.padding-lr-30 {
    padding-left: 30rpx;
    padding-right: 30rpx;
}

.bg-ff {
    background: #fff;
}

.border-bottom-ed {
    border-bottom: 1rpx solid #ededed;
}

.flex {
    display: flex;
}

.align-center {
    align-items: center;
}

.justify-between {
    justify-content: space-between;
}

.picker-view {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 750rpx;
    height: 600rpx;
    background: #fff;
}

.item-pircker {
    line-height: 80rpx;
    height: 80rpx;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.listbox {
    width: 100%;
    // height: 100vh;
    column-count: 2;
    column-gap: 0;
    margin-top: 20rpx;
    overflow: hidden;
    // column-gap: 10px;
    // display: flex;
    // justify-content: space-between;
    // flex-wrap: wrap;
}

.barimg {
    width: 690rpx;
    height: 120rpx;
    border-radius: 10rpx 10rpx 10rpx 10rpx;
    margin: 20rpx auto 0;
    display: block;
}

.searchimg {
    width: 25rpx;
    height: 23rpx;
}

.searchline {
    width: 2rpx;
    height: 32rpx;
    background: #b0b0b0;
    margin: 0 20rpx;
}

.van-img {
    width: 100%;
    height: 100%;
}

.recommend-technician {
    white-space: nowrap;

    // width: 690rpx;
    // overflow: hidden;
    .recommend-item {
        display: inline-block;
    }

    .recommend-item.type-1 {
        width: 180rpx;
        margin-left: 26rpx;

        .cover {
            width: 180rpx;
            height: 180rpx;
        }

        .ellipsis {
            max-width: 180rpx;
        }
    }

    .recommend-item.type-2 {
        width: 203rpx;
        height: 151rpx;
        background: #f4f6f7;
        border-radius: 12rpx;
        margin-left: 20rpx;

        .cover {
            width: 70rpx;
            height: 70rpx;
        }

        .ellipsis {
            max-width: 82rpx;
        }

        .iconyduixingxingshixin {
            font-size: 26rpx;
            background-image: -webkit-linear-gradient(
                270deg,
                #fad961 0%,
                #f76b1c 100%
            );
        }

        .star-text {
            height: 26rpx;
            color: #ff9519;
            margin-left: 6rpx;
        }

        .new-technician {
            width: 67rpx;
            height: 30rpx;
            border-radius: 8rpx;
            transform: rotateZ(360deg);
        }
    }

    .recommend-item:nth-child(1) {
        margin-left: 0;
    }
}

.btimg {
    width: 24rpx;
    height: 20rpx;
}

.zbimg {
    width: 24rpx;
    height: 20rpx;
}

.swiper-item {
    height: 270rpx;
    width: 100%;
}

.swiper-item image {
    height: 270rpx;
    width: 100%;
    border-radius: 10rpx;
}

.swiper {
    width: 100%;
    height: 270rpx;
    margin-top: 30rpx;
}
</style>